<template>
  <div class="rank">
    <HotTitle :songs="songs" />
    <ul class="toplist">
      <HotList
        v-for="(item, index) in songs.tracks"
        :key="item.id"
        :item="item"
        :index="index"
        :playing="playing"
        :currentPlaySongId="currentPlaySongId"
        @click.native="$emit('update:gedan',songs.tracks )"

        @update:current-play-song="$emit('update:current-play-song', $event)"
      ></HotList>
    </ul>
  </div>
</template>

<script>
import HotTitle from "../components/HotTitle.vue";
import HotList from "../components/HotList.vue";

export default {
  props: {
    currentPlaySongId: [Number, String],
    playing: Boolean,
  },
  data: function () {
    return {
      songs: {},
    };
  },
  created: function () {
    this.axios
      .get("https://apis.netstart.cn/music/playlist/detail?id=3778678")
      .then((res) => {
        // console.log(res);
        this.songs = res.data.playlist;
      });
  },
  components: {
    // RankingList,
    HotTitle,
    HotList,
  },
};
</script>

<style lang="less" scoped></style>
